<template>
	<view class="uni-margin-wrap">
		<swiper class="swiper" indicator-dots>
			<swiper-item>
				<view class="swiper-item uni-bg-red">
					<!-- 引导页一 -->
					<view class="swiper-item-top">
						<view class="swip">智慧社区 享受新生活</view>
						<view class="swip-ip">简单<text>/</text>
							便捷<text>/</text>
							速度<text>/</text>
							高效<text>/</text>
							安全</view>
					</view>
					<view class="swiper-item-img">
						<image src="../../static/image/u48.png" mode="scaleToFill" />
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">
					<view class="swiper-item-top">
						<view class="swip">智慧社区 未来生活</view>
						<view class="swip-ip">关注不止现在</view>
					</view>
					<view class="swiper-item-img">
						<image src="../../static/image/u54.png" mode="scaleToFill" />
					</view>

				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">
					<view class="swiper-item-top">
						<view class="swip">智慧社区 品质生活</view>
						<view class="swip-ip">为您提供无微不至的关怀和体验</view>
					</view>
					<view class="swiper-item-img">
						<image src="../../static/image/u62.png" mode="scaleToFill" />
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">
					<view class="swiper-item-top">
						<view class="swip">智慧社区 从这里开始</view>
					</view>
					<view class="swiper-item-img" style="margin-top: 100rpx;">
						<image src="../../static/image/u70.png" mode="scaleToFill" />
					</view>

					<view class="but" @click="go">立即体验</view>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script setup>
let go = () => {
	uni.navigateTo({
		url: '/pages/login/login'
	})
}

</script>

<style scoped lang="scss">
.uni-margin-wrap,
.swiper {
	height: 100vh;
	background-color: #f3f3f3;
}

.uni-swiper-dots .uni-swiper-dots-horizontal {
	bottom: 90px !important;
}

.swiper-item-top {
	padding-top: 150rpx;
	height: 250rpx;
	background-color: #118ee9;
	color: #fff;
	text-align: center;
	font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;

	.swip {
		font-size: 45rpx;
		font-weight: 600;
	}

	.swip-ip {
		margin-top: 20rpx;

		text {
			margin: 0 5rpx;
		}

	}
}

.swiper-item-img {
	margin-top: 200rpx;

	image {
		width: 100%;
	}
}

.but {
	color: #fff;
	width: 230rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	background-color: #118ee9;
	display: flex;
	font-family: '微软雅黑', sans-serif;
	margin: 0 auto;
	justify-content: center;
	margin-top: 60rpx;
	font-size: 28rpx;
}
</style>
